<template>
  <div class="deep-child-component" :class="themeClass">
    <h3>深层子组件</h3>
    <p>当前主题: {{ theme }}</p>
    <p>用户信息: {{ userInfo.name }} - {{ userInfo.age }}岁</p>
    
    <div>
      <button @click="toggleTheme">切换主题</button>
      <button @click="updateUser">更新用户信息</button>
    </div>
    
    <p>这个组件直接从根组件注入数据，跨越了中间组件</p>
  </div>
</template>

<script setup>
import { inject, computed } from 'vue'

// 注入数据
const theme = inject('theme')
const userInfo = inject('userInfo')
const toggleTheme = inject('toggleTheme')
const updateUser = inject('updateUser')

// 计算属性
const themeClass = computed(() => {
  return theme.value === 'dark' ? 'dark-theme' : 'light-theme'
})
</script>

<style scoped>
.deep-child-component {
  padding: 15px;
  border-radius: 6px;
  margin-top: 10px;
  border: 1px solid #ddd;
}

.light-theme {
  background-color: #ffffff;
  color: #333333;
}

.dark-theme {
  background-color: #333333;
  color: #ffffff;
}

.deep-child-component button {
  margin: 0 5px;
  padding: 8px 12px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.deep-child-component button:hover {
  background-color: #369870;
}
</style>